<template>
	<div>
		<router-link tag="div" to="/" class="header-abs">
			<div class="iconfont back-icon">&#xe6ec;</div>
		</router-link>
		<div class="header-fixed" :style="opacityStyle" v-show="ifShow">
			页面详情
		</div>
	</div>
</template>

<script>
export default{
	name:'DetailHeader',
	activated(){//keepalive添加的生命周期函数，每次页面刷新或者出现的时候会触发
		window.addEventListener('scroll', this.handleScroll)
	},
	deactivated(){//keepalive添加的生命周期函数，每次页面消失的时候触发
		window.removeEventListener('scroll', this.handleScroll)//及时解绑，否则会在其他页面也处罚滑动事件
	},
	methods:{
		handleScroll:function(){
			let height= document.documentElement.scrollTop;
			if(height>60){
				this.ifShow= true
				this.opacityStyle.opacity= height/140>1?1:height/140
			}
			else{
				this.ifShow= false
			}
		}
	},
	data:function(){
		return {
			opacityStyle:{
				opacity: 0
			},
			ifShow: false
		}
	}
}
</script>

<style lang="stylus" scoped>
	.header-fixed
		height: .86rem
		position: fixed
		width:100%
		top: 0
		line-height: .86rem
		overflow:hidden
		text-align: center
		color: #fff
		background: #00bcd4
	.header-abs
		width: .8rem
		position: absolute
		left: .2rem
		top: .2rem
		height: .8rem
		border-radius: .4rem
		background: #000
		text-align: center
		line-height: .8rem
		color: #fff
		.iconfont
			font-size: .6rem
	.content
		height: 50rem
</style>
